<template>
  <div class="chart-selector-overlay" @click.self="$emit('close')">
    <div class="chart-selector-modal">
      <div class="chart-selector-header">
        <h2>选择图表类型</h2>
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>
      <div class="chart-selector-content">
        <div 
          v-for="chart in availableCharts" 
          :key="chart.type"
          class="chart-option"
          @click="selectChart(chart)"
        >
          <div class="chart-option-icon" v-html="chart.icon"></div>
          <div class="chart-option-label">{{ chart.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue';

const emit = defineEmits(['close', 'select']);

// 可用图表类型
interface ChartType {
  type: string;
  label: string;
  icon: string;
  description?: string;
  defaultOptions: any;
}

const availableCharts: ChartType[] = [
  {
    type: 'bar',
    label: '柱状图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#1890ff" d="M4 5h2v16H4V5zm4 0h2v16H8V5zm4 0h2v16h-2V5zm4 0h2v16h-2V5zm4 0h2v16h-2V5z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
  },
  {
    type: 'horizontal-bar',
    label: '条形图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#52c41a" d="M5 4v2h16V4H5zm0 4v2h12V8H5zm0 4v2h16v-2H5zm0 4v2h8v-2H5zm0 4v2h12v-2H5z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {},
      legend: {
        data: ['数量']
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          data: [20, 35, 15, 40, 25, 30]
        }
      ]
    }
  },
  {
    type: 'line',
    label: '折线图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#52c41a" d="M3 12h2v5H3v-5zm16-5h2v10h-2V7zm-8 2h2v8h-2V9zm4 3h2v5h-2v-5zM3 7h18v1H3V7zm0 16h18v1H3v-1z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    }
  },
  {
    type: 'area',
    label: '面积图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#13c2c2" d="M3 12h2v5H3v-5zm16-5h2v10h-2V7zm-8 2h2v8h-2V9zm4 3h2v5h-2v-5zM3 7h18v1H3V7zm0 16h18v1H3v-1z"/><path fill="#13c2c2" fill-opacity="0.3" d="M3 16H5V17H3zM5 15H7V17H5zM7 13H9V17H7zM9 11H11V17H9zM11 14H13V17H11zM13 13H15V17H13zM15 7H17V17H15zM17 7H19V17H17zM19 7H21V17H19z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }
      ]
    }
  },
  {
    type: 'pie',
    label: '饼图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#fa8c16" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4-10.5l-5 3.33V7.5l5 3z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '搜索引擎' },
            { value: 735, name: '直接访问' },
            { value: 580, name: '邮件营销' },
            { value: 484, name: '联盟广告' },
            { value: 300, name: '视频广告' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  },
  {
    type: 'scatter',
    label: '散点图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#722ed1" d="M20 16a3 3 0 100-6 3 3 0 000 6zm0-10a3 3 0 100-6 3 3 0 000 6zM4 21a3 3 0 100-6 3 3 0 000 6zm0-10a3 3 0 100-6 3 3 0 000 6zm10 0a3 3 0 100-6 3 3 0 000 6zm-5 5a3 3 0 100-6 3 3 0 000 6z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      xAxis: {},
      yAxis: {},
      series: [
        {
          symbolSize: 20,
          data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
          ],
          type: 'scatter'
        }
      ]
    }
  },
  {
    type: 'radar',
    label: '雷达图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#eb2f96" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/><path fill="#eb2f96" fill-opacity="0.3" d="M12 2L9.0 9l-7 1 5 5-1 7 6-3 6 3-1-7 5-5-7-1-3-7z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {},
      legend: {
        data: ['预算分配', '实际开销']
      },
      radar: {
        indicator: [
          { name: '销售', max: 6500 },
          { name: '管理', max: 16000 },
          { name: '信息技术', max: 30000 },
          { name: '客服', max: 38000 },
          { name: '研发', max: 52000 },
          { name: '市场', max: 25000 }
        ]
      },
      series: [{
        name: '预算 vs 开销',
        type: 'radar',
        data: [
          {
            value: [4300, 10000, 28000, 35000, 50000, 19000],
            name: '预算分配'
          },
          {
            value: [5000, 14000, 28000, 31000, 42000, 21000],
            name: '实际开销'
          }
        ]
      }]
    }
  },
  {
    type: 'funnel',
    label: '漏斗图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#faad14" d="M2 2h20v4H2V2zm2 6h16v4H4V8zm4 6h8v4H8v-4zm2 6h4v4h-4v-4z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}%'
      },
      legend: {
        data: ['展现', '点击', '访问', '咨询', '订单'],
        top: 'bottom'
      },
      series: [
        {
          name: '漏斗图',
          type: 'funnel',
          left: '10%',
          top: 60,
          bottom: 60,
          width: '80%',
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          gap: 2,
          label: {
            show: true,
            position: 'inside'
          },
          emphasis: {
            label: {
              fontSize: 20
            }
          },
          data: [
            { value: 100, name: '展现' },
            { value: 80, name: '点击' },
            { value: 60, name: '访问' },
            { value: 40, name: '咨询' },
            { value: 20, name: '订单' }
          ]
        }
      ]
    }
  },
  {
    type: 'heatmap',
    label: '热力图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#f5222d" fill-opacity="0.2" d="M2 2h4v4H2V2zm5 0h4v4H7V2zm5 0h4v4h-4V2zm5 0h4v4h-4V2zM2 7h4v4H2V7zm5 0h4v4H7V7zm5 0h4v4h-4V7zm5 0h4v4h-4V7zM2 12h4v4H2v-4zm5 0h4v4H7v-4zm5 0h4v4h-4v-4zm5 0h4v4h-4v-4zM2 17h4v4H2v-4zm5 0h4v4H7v-4zm5 0h4v4h-4v-4zm5 0h4v4h-4v-4z"/><path fill="#f5222d" fill-opacity="0.5" d="M9 4h2v2H9V4zm0 8h2v2H9v-2zm0-4h2v2H9V8zm-4 0h2v2H5V8zm0 4h2v2H5v-2zm0 4h2v2H5v-2zm0-8h2v2H5V4zm8 0h2v2h-2V4zm8 0h2v2h-2V4zm0 4h2v2h-2V8zm-8 0h2v2h-2V8zm4 0h2v2h-2V8zm-4 4h2v2h-2v-2zm8 0h2v2h-2v-2zm-4 0h2v2h-2v-2zm-4 4h2v2h-2v-2zm8 0h2v2h-2v-2zm-4 0h2v2h-2v-2z"/><path fill="#f5222d" fill-opacity="0.8" d="M18 16h2v2h-2v-2zm-4-4h2v2h-2v-2zm0-4h2v2h-2V8z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {
        position: 'top'
      },
      grid: {
        height: '50%',
        top: '10%'
      },
      xAxis: {
        type: 'category',
        data: ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a',
          '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'],
        splitArea: {
          show: true
        }
      },
      yAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        splitArea: {
          show: true
        }
      },
      visualMap: {
        min: 0,
        max: 10,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
      },
      series: [{
        name: '访问量',
        type: 'heatmap',
        data: [
          [0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2], [0, 5, 4], [0, 6, 7],
          [1, 0, 1], [1, 1, 6], [1, 2, 4], [1, 3, 8], [1, 4, 5], [1, 5, 2], [1, 6, 3],
          [2, 0, 7], [2, 1, 8], [2, 2, 0], [2, 3, 3], [2, 4, 1], [2, 5, 5], [2, 6, 4]
        ],
        label: {
          show: false
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    }
  },
  {
    type: 'gauge',
    label: '仪表盘',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#1890ff" d="M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm1.1 8.6c-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1z"/><path fill="#1890ff" fill-opacity="0.3" d="M12 12V7l-4 5h4z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
      },
      series: [
        {
          name: '业务指标',
          type: 'gauge',
          detail: {
            valueAnimation: true,
            formatter: '{value}%',
            color: 'inherit'
          },
          data: [{ value: 75, name: '完成率' }],
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d']
              ]
            }
          }
        }
      ]
    }
  },
  {
    type: 'treemap',
    label: '矩形树图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#52c41a" d="M2 2h10v10H2V2zm0 11h10v10H2V13zm11-11h10v5H13V2zm0 6h10v15H13V8z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {},
      series: [
        {
          name: '矩形树图',
          type: 'treemap',
          visibleMin: 300,
          data: [
            {
              name: '第一部门',
              value: 40,
              children: [
                {
                  name: '产品A',
                  value: 30
                },
                {
                  name: '产品B',
                  value: 10
                }
              ]
            },
            {
              name: '第二部门',
              value: 20
            },
            {
              name: '第三部门',
              value: 60,
              children: [
                {
                  name: '产品C',
                  value: 20
                },
                {
                  name: '产品D',
                  value: 10
                },
                {
                  name: '产品E',
                  value: 30
                }
              ]
            }
          ]
        }
      ]
    }
  },
  {
    type: 'word-cloud',
    label: '词云图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#1890ff" d="M4 4v2h6V4H4zm8 0v2h8V4h-8zm-8 4v2h10V8H4zm12 0v2h4V8h-4zM4 12v2h4v-2H4zm6 0v2h10v-2H10zM4 16v2h8v-2H4zm10 0v2h6v-2h-6zM4 20v2h6v-2H4zm8 0v2h8v-2h-8z"/></svg>',
    defaultOptions: {
      title: {
        show: false
      },
      tooltip: {
        show: true
      },
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '80%',
        height: '80%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          color: function () {
            return 'rgb(' + 
              Math.round(Math.random() * 155 + 100) + ',' + 
              Math.round(Math.random() * 155 + 100) + ',' + 
              Math.round(Math.random() * 155 + 100) + ')';
          }
        },
        data: [
          { name: '技术', value: 128 },
          { name: '数据', value: 110 },
          { name: '分析', value: 95 },
          { name: '智能', value: 85 },
          { name: '开发', value: 78 },
          { name: '云计算', value: 72 },
          { name: '创新', value: 68 },
          { name: '平台', value: 65 },
          { name: '服务', value: 60 },
          { name: '系统', value: 58 },
          { name: '研究', value: 55 },
          { name: '大数据', value: 50 },
          { name: '管理', value: 48 },
          { name: '产品', value: 46 },
          { name: '业务', value: 42 }
        ]
      }]
    }
  },
  {
    type: 'metric',
    label: '指标图',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#1890ff" d="M2 12c0 5.52 4.48 10 10 10s10-4.48 10-10S17.52 2 12 2 2 6.48 2 12zm10-1h4v2h-4v-2zm0-6h4v4h-4V5z"/></svg>',
    description: '用于展示单个关键数据指标',
    defaultOptions: {
      value: 4841,
      title: 'AI提效统计',
      valueColor: '#333333',
      valueSize: 60,
      titleColor: '#666666',
      titleSize: 24,
      backgroundColor: '#FFFFFF',
      borderRadius: 8,
      valueFormatter: 'thousands'
    }
  },
  {
    type: 'table',
    label: '表格',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="#1890ff" d="M3 3h18v18H3V3zm16 2H5v3h14V5zm0 5H5v2h14v-2zm0 4H5v2h14v-2zm0 4H5v2h14v-2z"/></svg>',
    description: '用于展示结构化数据',
    defaultOptions: {
      title: '数据表格',
      columns: [
        { title: '列1', dataIndex: 'col1', key: 'col1' },
        { title: '列2', dataIndex: 'col2', key: 'col2' },
        { title: '列3', dataIndex: 'col3', key: 'col3' }
      ],
      dataSource: [
        { key: '1', col1: '数据1-1', col2: '数据1-2', col3: '数据1-3' },
        { key: '2', col1: '数据2-1', col2: '数据2-2', col3: '数据2-3' },
        { key: '3', col1: '数据3-1', col2: '数据3-2', col3: '数据3-3' }
      ],
      pagination: false,
      bordered: true,
      headerBackground: '#fafafa',
      headerTextColor: '#262626',
      rowBackground: '#ffffff',
      rowTextColor: '#262626',
      fontSize: 14,
      headerFontSize: 14
    }
  }
];

const selectChart = (chart: ChartType) => {
  emit('select', chart);
};
</script>

<style scoped>
.chart-selector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.chart-selector-modal {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 600px;
  max-width: 90%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.chart-selector-header h2 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.close-btn:hover {
  background-color: #f0f0f0;
  color: #666;
}

.chart-selector-content {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 16px;
  overflow-y: auto;
}

.chart-option {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.chart-option:hover {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.chart-option-icon {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}

.chart-option-label {
  font-size: 14px;
}
</style> 